<template>
  <div>
   <div class="article-page" v-if="list.length">
     <div
       v-for="item in list"
       :key="item.id"
       class="article-item"
       @click="tiao(item.id)"
       >
       <div class="head">
         <img :src="item.creatorAvatar" alt="" />
         <div class="con">
           <p class="title">{{ item.stem }}</p>
           <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
         </div>
       </div>
       <div class="body">{{ item.content }}</div>
       <div class="foot">点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
     </div>
   </div>
  </div>
 </template>
 <script>
 import axios from 'axios';
 export default{
     name:'',
     data () {
         return {
             list:[]
         }
     },
     created () {
       this.get()
     },
     computed:{
     },
     methods:{
      async get(){
         const res = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
         console.log(res);
         this.list=res.data.result.rows
       },
       tiao(id){
         console.log(id);
         this.$router.push({name:'tiao',params:{id}})
       }
     }
 }
 </script>
 <style lang='less'  scoped>
     .article-page {
   background: #f5f5f5;
 }
 .article-item {
   margin-bottom: 10px;
   background: #fff;
   padding: 10px 15px;
   .head {
     display: flex;
     img {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       overflow: hidden;
     }
     .con {
       flex: 1;
       overflow: hidden;
       padding-left: 15px;
       p {
         margin: 0;
         line-height: 1.5;
         &.title {
           text-overflow: ellipsis;
           overflow: hidden;
           width: 100%;
           white-space: nowrap;
         }
         &.other {
           font-size: 10px;
           color: #999;
         }
       }
     }
   }
   .body {
     font-size: 14px;
     color: #666;
     line-height: 1.6;
     margin-top: 10px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
   }
   .foot {
     font-size: 12px;
     color: #999;
     margin-top: 10px;
   }
 }
 </style>
 